<template>
    <div class="chart_mingxi_wp">
        <div class="header yellow">{{ storeChart.selecteHangeQingData?.heyue_name }}</div>
        <div class="mignxi_uls">
            <ul class="top">
                <li>卖出</li>
                <li class="green fontSize">{{ buySellPrice?.seller1 }}</li>
                <li class="yellow fontSize">{{ storeChart.selecteHangeQingData?.sellingVol1 }}</li>
            </ul>
            <ul class="top">
                <li>买入</li>
                <li class="red fontSize">{{ buySellPrice?.buy1 }}</li>
                <li class="yellow fontSize">{{ storeChart.selecteHangeQingData?.buyVol1 }}</li>
            </ul>
            <div class="center">
                <ul class="center_left">
                    <li v-for="(item, index ) in rightCenter.left" :key="index">
                        <div>{{ item.name }}</div>
                        <div :class="item.nowUpw">{{ item.currentPrice }}</div>
                    </li>
                </ul>
                <ul class="center_right">
                    <li v-for="(item, index ) in rightCenter.right" :key="index"
                        @click="changeSwitchPriceDisplay(item.name)">
                        <div v-if="item.name != 'setPrice'">{{ item.name }}</div>
                        <div v-if="item.name != 'setPrice'" :class="item.nowUpw">{{ item.currentPrice }}</div>
                        <div v-if="item.name == 'setPrice' && SwitchPriceDisplay == 1"> 结算价<i class="iconfonMy icon-sanjiao"
                                style="font-size: 13px;"></i>
                        </div>
                        <div v-if="item.name == 'setPrice' && SwitchPriceDisplay == 2">均价<i class="iconfonMy icon-sanjiao"
                                style="font-size: 13px;"></i></div>
                        <div v-if="item.name == 'setPrice' && SwitchPriceDisplay == 1">{{ item.jiesuan }}</div>
                        <div v-if="item.name == 'setPrice' && SwitchPriceDisplay == 2" :class="item.nowUpw">{{ item.junjia
                        }}</div>

                    </li>
                </ul>
            </div>
            <ul class="central central1" id="da_Dan_Id">
                <li class="nav_table">
                    <div class="l_1">单位</div>
                    <!-- <div class="l_2" @click="$message.warning('暂未开放')"><i class="iconfonMy icon-duigou"
                            v-show="showDanwei == 1"></i><i class="iconfonMy" v-show="showDanwei != 1"></i> 元/吨</div> -->
                    <div class="l_3" @click="showDanwei = 2"><i class="iconfonMy icon-duigou"
                            v-show="showDanwei == 2"></i>{{
                                storeMain.classHeyue[storeMain.classHeyueIndex][storeChart.selecteHangeQingData?.heyue_bh]?.heyue_danwei
                            }}</div>
                </li>
                <!-- 大单列表 -->
                <li class="cent_list">
                    <div class="l_1">时间</div>
                    <div class="l_2">价位</div>
                    <div class="l_3">大单</div>
                </li>
                <li class="cent_list cent_cont" v-for="(item, index) in daDanList" :key="index">
                    <div class="l_1">{{ item.updateTime }}</div>
                    <div class="l_2"
                        :class="item.currentPrice > storeChart.selecteHangeQingData?.settlementYes ? 'red' : 'green'">{{
                            Number(item.currentPrice) }}</div>
                    <div class="l_3" :class="item.color">{{ item.transaction }}</div>
                </li>
            </ul>
            <ul class="central central2" id="mingxi">
                <li class="cent_list">
                    <div class="l_1">时间</div>
                    <div class="l_2">价位</div>
                    <div class="l_3">现手</div>
                </li>
                <li class="cent_list cent_cont" v-for="(item, index) in mingxi_list" :key="index">
                    <div class="l_1">{{ item.updateTime }}</div>
                    <div class="l_2"
                        :class="item.currentPrice > storeChart.selecteHangeQingData?.settlementYes ? 'red' : 'green'">{{
                            Number(item.currentPrice) }}</div>
                    <div class="l_3" :class="item.color">{{ item.transaction }}</div>
                </li>
            </ul>
            <ul class="center_bottom">
                <li class="active"><span>明细</span></li>
                <!-- <li><span>分价</span></li>
                <li><span>分笔</span></li>
                <li><span>统计</span></li> -->
            </ul>
        </div>
    </div>
</template>

<script setup>
import moment from 'moment'
const { ipcRenderer } = require('electron');
import { ref, computed, watch, onMounted } from 'vue'
import { chartStore, mainStore } from '@/store/index.js'
const storeMain = mainStore()


const storeChart = chartStore()
const rightCenter = computed(() => {
    if (!storeChart.selecteHangeQingData) return { leftList: {}, rightList: {} }
    let ActQuotes = storeChart.selecteHangeQingData
    let leftList = [
        {
            name: '最新',
            nowUpw: ActQuotes.nowUpw > 0 ? 'red' : ActQuotes.nowUpw == 0 ? '' : 'green',
            currentPrice: ActQuotes.currentPrice || '----'
        },
        {
            name: '现手',
            nowUpw: 'yellow',
            currentPrice: ActQuotes.transaction || '----'
        }, {
            name: '总量',
            nowUpw: 'yellow',
            currentPrice: ActQuotes.volume || '----'
        }, {
            name: '持仓',
            nowUpw: 'yellow',
            currentPrice: ActQuotes.inventory || '----'
        }, {
            name: '日增',
            nowUpw: 'yellow',
            currentPrice: ActQuotes.rizeng || '----'
        }, {
            name: '外盘',
            nowUpw: 'yellow',
            currentPrice: '----'
        }, {
            name: '比例',
            nowUpw: 'yellow',
            currentPrice: '----'
        }, {
            name: '内盘',
            nowUpw: 'yellow',
            currentPrice: '----'
        }, {
            name: '比例',
            nowUpw: 'yellow',
            currentPrice: '----'
        }, {
            name: '杠杆',
            nowUpw: 'yellow',
            currentPrice: '----'
        },
    ]
    let rightList = [
        {
            name: '涨跌',
            nowUpw: ActQuotes.nowUpw > 0 ? 'red' : ActQuotes.nowUpw == 0 ? '' : 'green',
            currentPrice: ActQuotes.nowUpw ? Number(ActQuotes.nowUpw).toFixed(2) + '%' : '----'
        },
        {
            name: '速涨',
            nowUpw: ActQuotes.nowUpw > 0 ? 'red' : ActQuotes.nowUpw == 0 ? '' : 'green',
            currentPrice: ActQuotes.nowGain ? ActQuotes.nowGain + '%' : '----'
        }, {
            name: '开盘',
            nowUpw: ActQuotes.openingToday > ActQuotes.settlementYes ? 'red' : ActQuotes.openingToday == ActQuotes.settlementYes ? '' : 'green',
            currentPrice: ActQuotes.openingToday || '----'
        }, {
            name: '最高',
            nowUpw: ActQuotes.openingToday > ActQuotes.settlementYes ? 'red' : ActQuotes.openingToday == ActQuotes.settlementYes ? '' : 'green',
            currentPrice: ActQuotes.highestPrice || '----'
        }, {
            name: '最低',
            nowUpw: ActQuotes.openingToday > ActQuotes.settlementYes ? 'red' : ActQuotes.openingToday == ActQuotes.settlementYes ? '' : 'green',
            currentPrice: ActQuotes.lowestPrice || '----'
        }, {
            name: 'setPrice',
            nowUpw: 'yellow',
            jiesuan: '----',
            junjia: '----'

        }, {
            name: '昨收',
            nowUpw: '',
            currentPrice: ActQuotes.closedYes || '----'
        }, {
            name: '昨结',
            nowUpw: '',
            currentPrice: ActQuotes.settlementYes || '----'
        }, {
            name: '涨停',
            nowUpw: 'red',
            currentPrice: ActQuotes.dailyLimit || '----'
        }, {
            name: '跌停',
            nowUpw: 'green',
            currentPrice: ActQuotes.downLimit || '----'
        },
    ]
    return { left: leftList, right: rightList }
})

const buySellPrice = computed(() => {
    let buy1 = storeChart.selecteHangeQingData.buy1,
        seller1 = storeChart.selecteHangeQingData.seller1,
        obj = { buy1: 0, seller1: 0 }
    let arr1 = String(buy1).split('.'),
        arr2 = String(seller1).split('.'),
        length1 = arr1[1] ? arr1[1].length : 0,
        length2 = arr2[1] ? arr2[1].length : 0
    if (length1 - length2 >= 0) {
        obj.buy1 = buy1 ? buy1.toFixed(length1) : 0
        obj.seller1 = seller1 ? seller1.toFixed(length1) : 0
    }
    if (length1 - length2 < 0) {
        obj.buy1 = buy1 ? buy1.toFixed(length2) : 0
        obj.seller1 = seller1 ? seller1.toFixed(length2) : 0
    }
    return obj
})

watch(() => storeChart.FenshiData, (newVal) => {
    if (!newVal) return []
    let HangeQingData = newVal.map(item => {
        return {
            updateTime: moment(item.split(',')[1] * 1000).format('hh:mm:ss'),
            currentPrice: item.split(',')[2],
            color: Math.random() >= 0.5 ? "red" : "green",
            transaction: item.split(',')[3] ? item.split(',')[3] : 1,
        }
    })
    HangeQingData = HangeQingData.sort((a, b) => (a.time - b.time));
    let mingxi = document.getElementById('mingxi')
    let num = parseInt(mingxi.offsetHeight / 24) - 2
    mingxi_list.value = [...HangeQingData.splice(-num)]

    let daDanDoc = document.getElementById('da_Dan_Id')
    let daDanDocNum = daDanDoc ? parseInt(daDanDoc.offsetHeight / 24) - 2 : 0
    let daDan_List = [...mingxi_list.value].filter(item => (item.transaction >= daDanYuzhi.value))
    daDanList.value = [...daDan_List.splice(-daDanDocNum)]
})

watch(() => storeChart.selecteHangeQingData, (newVal, oldVal) => {
    if (!newVal || !oldVal) return []
    if (oldVal.timestamp == newVal.timestamp) return [];
    let HangeQingData = newVal
    const randomBoolean = () => Math.random() >= 0.5;
    let mingxi = document.getElementById('mingxi')
    let num = parseInt(mingxi.offsetHeight / 24) - 2
    if (num > 0 && mingxi_list.value.length > num) {
        let list = [...mingxi_list.value]
        mingxi_list.value = [...list.splice(-num)]
    }
    HangeQingData.color = randomBoolean() ? "red" : "green";
    mingxi_list.value.push(HangeQingData);
    let daDanDoc = document.getElementById('da_Dan_Id')
    let daDanDocNum = daDanDoc ? parseInt(daDanDoc.offsetHeight / 24) - 2 : 0
    if (daDanDocNum > 0 && HangeQingData.transaction >= daDanYuzhi.value) {
        if (daDanList.value.length >= daDanDocNum) {
            daDanList.value.shift();
        }
        daDanList.value.push(HangeQingData);
    }
})



const SwitchPriceDisplay = ref(1)
const showDanwei = ref(2)
const mingxi_list = ref([])
const daDanList = ref([])
const resizeObserver = ref(null)
const resizeObserverMingx = ref(null)
const daDanYuzhi = ref(localStorage.getItem('daDanYuzhi') == null ? 5 : localStorage.getItem('daDanYuzhi'))

ipcRenderer.on('right_click_msg_win', (e, v) => {
    if (v.type == '设置大单阈值') {
        localStorage.setItem('daDanYuzhi', v.msg)
        daDanYuzhi.value = v.msg == 0 ? 5 : v.msg
    }
})

onMounted(() => {
    const targetNode = document.getElementById('da_Dan_Id');
    resizeObserver.value = new ResizeObserver((entries) => {
        for (let entry of entries) {
            let height = entry.contentRect.height
            if (height <= 0) return
            let daDanDocNum = height / 24 - 1
            daDanList.value = [...daDanList.value.splice(0, daDanDocNum)]
        }
    });
    resizeObserver.value.observe(targetNode);
    const mingxiNode = document.getElementById('mingxi');
    resizeObserverMingx.value = new ResizeObserver((entries) => {
        for (let entry of entries) {
            let height = entry.contentRect.height
            if (height <= 0) return
            let num = height / 24 - 1
            let arr = [...mingxi_list.value]
            mingxi_list.value = [...arr.splice(0, num)]
        }
    });
    resizeObserverMingx.value.observe(mingxiNode);
})
const changeSwitchPriceDisplay = (v) => {
    if (v == 'setPrice') SwitchPriceDisplay.value = SwitchPriceDisplay.value == 1 ? 2 : 1;
}
</script>

<style scoped lang="scss">
.chart_mingxi_wp {
    width: 100%;
    height: 100%;

    .header {
        width: 100%;
        height: 30px;
        font-size: 20px;
        font-weight: 300;
        text-align: center;
        line-height: 30px;
    }

    .mignxi_uls {
        border: 1px #800e07 solid;
        border-bottom: none;
        height: calc(100% - 30px);

        .top {
            display: flex;
            border-bottom: 1px solid red;
            font-size: 14px;
            font-weight: 300;
            line-height: 27px;

            li {
                flex: 1;
            }

            .fontSize {
                font-size: 22px;
            }
        }

        .center {
            width: 100%;
            display: flex;
            font-size: 14px;
            padding: 0 2px;
            box-sizing: border-box;
            line-height: 23px;

            .center_left,
            .center_right {
                flex: 1;
                padding-right: 5px;
                border-right: 1px #be140a dashed;
                font-size: 14px;

                li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }

            .center_right {
                padding-left: 5px;
                border-right: none;
            }

        }

        .central1 {
            height: 19vh;
        }

        .central2 {
            height: calc(100% - 19vh - 299px);
            border-bottom: 1px #be140a solid;
        }

        .central {
            width: 100%;
            box-sizing: border-box;
            font-size: 14px;

            .nav_table,
            .cent_list {
                background-color: #232822;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: 1px #be140a solid;
                line-height: 24px;

                div {
                    flex: 1;

                    .iconfonMy {
                        display: inline-block;
                        color: yellow;
                        transform: translateY(3px);
                    }
                }
            }

            .nav_table {
                .l_2 {
                    text-align: left;

                    i {
                        width: 16px;
                    }
                }
            }

            .cent_list {
                background-color: #000;
                color: rgba($color: #fff, $alpha: .7);
                padding: 0 5px;
            }

            .cent_cont {
                border: none;
            }

            .l_1 {
                text-align: left;
            }

            .l_2 {
                text-align: center;
            }

            .l_3 {
                text-align: right;
            }
        }

        .center_bottom {
            height: 17px;
            display: flex;
            align-items: center;
            padding: 0 10px;

            li {
                width: 62px;
                background-color: #be140a;
                clip-path: polygon(23% 100%, 75% 100%, 100% 0%, 0% 0%);
                border: 8px #be140a solid;
                position: relative;

                span {
                    position: absolute;
                    top: -7px;
                    left: 6px;
                    z-index: 10;
                }
            }

            li:nth-child(2) {
                transform: translateX(-7px);
            }

            li:nth-child(3) {
                transform: translateX(-14px);
            }

            li:nth-child(4) {
                transform: translateX(-21px);
            }

            li::after {
                content: "";
                width: calc(100% - 2px);
                background-color: #000;
                clip-path: polygon(24% 100%, 75% 100%, 100% 0%, 0% 0%);
                border: 8px #000 solid;
                position: absolute;
                top: -9px;
                left: -7px;
            }

            .active {
                margin-top: -3px;
                z-index: 9;
            }
        }
    }

    .yellow {
        color: yellow;
    }

    .green {
        color: #00dc00;
    }

    .red {
        color: #fa3b3b;
    }
}
</style>
